<!--密码找回页面-->
<template>
  <div>
    <t-navbar title="密码找回" :fixed="false" left-arrow @left-click="handleClick" />
  </div>
  <div style="margin-top: 30%">
    <t-avatar
        class="avatar-example"
        image="https://bpic.51yuansu.com/pic3/cover/01/88/29/5981e80be09db_610.jpg?x-oss-process=image/sharpen,100"
        shape="circle"
        size="100px"
    ></t-avatar>
    <h2>密码找回</h2>
    <div>
      <div>
        <t-input label="手机" v-model="user.phone" placeholder="请输入手机号">
          <template #suffix>
            <div class="suffix">
              <div class="suffix--line"></div>
              <label style="color: #747bff" @click="sendCode">发送验证码</label>
            </div>
          </template>
        </t-input>
      </div>
      <div>
        <t-input label="验证码" v-model="user.code" type="number" placeholder="请输入验证码"></t-input>
      </div>
      <div>
        <t-input label="密码" v-model="user.password" type="password" placeholder="请输入密码"></t-input>
      </div>
      <div style="margin-top: 20px">
        <t-button size="large" theme="light" @click="find" block>密码找回</t-button>
      </div>
    </div>
    <!--  其他导航-->
    <div style="margin-top: 20px;">
      <div style="float: left">
        <router-link style="color: grey;font-size: 12px;" to="/register">没有账号点击注册</router-link>
      </div>
      <div style="float: right">
        <router-link style="color: grey;font-size: 12px;" to="/">已有账号点击登录</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {Toast} from "tdesign-mobile-vue";
import {useRouter} from "vue-router";

const handleClick = () => {
  // localStorage.setItem("id",typeId)
  window.history.back() // 返回上一级页面
};

const router=useRouter()

const user=ref({
  phone:"",
  password:"",
  code:""
})

const sendCode=()=>{
  //请求接口 实现找回验证码
  get("tbUser/sendfcode?phone="+user.value.phone).then(r=>{
    if(r.code==0){
      console.log(r.data)
      Toast("验证码发送成功，请查收！")
    }else{
      Toast(r.data)
    }
  })
}
const find=()=>{
  //请求接口 实现密码找回
  post("tbUser/findpass",user.value).then(r=>{
    if(r.code==0){
      //密码找回成功 跳转登录页面
      router.push("/")
    }else{
      Toast(r.data)
    }
  })

}

</script>

<style scoped>

</style>